<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>exam_fe2移动端</title>
    <link rel="stylesheet" href="../lib/css/vant_index.css" />
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/vant.min.js"></script>
    <script src="../lib/js/jquery.js"></script>
  </head>
  <body>
    <div id="app">
      <van-nav-bar title="杜莉珍" left-text="返回" right-text="按钮" left-arrow>
        <template #right>
          <van-icon name="search" size="18">
        </template>
      </van-nav-bar>

      <div id="main">
        <van-list v-for="(p,index) in products">
          <template>
            <van-card 
            :key="p.id" 
            :num="p.qty" 
            :tag="p.price < 500 ? '低价':'高价'" 
            :price="p.price" 
            :desc="p.description" 
            :title="p.title"
            :thumb="'../lib/images/'+p.id+'.png'"
            :origin-price="p.oPrice"
            >
          </template> 
        </van-list>
      </div>

      <van-tabbar v-model="active" :fixed="true">
      <van-tabbar-item icon="wap-home-o"><span>首页</span></van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="bullhorn-o">发现</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
      </van-tabbar>
    </div>

    <script >
      let vm=new Vue({
        el:"#app",
        data(){
          return {active:0,products:[]}
        },
        created(){
          this.getProductList()
        },
        methods:{
          getProductList(){
            var that=this
            $.getJSON('http://localhost:8080/exam_be2/product/list',function(data){
              that.products=data
              that.products.forEach((item,index)=>{
                item.oPrice=(item.price * (1+ Math.random())).toFixed(2)
              })
              console.log(that.products);
            })
          }
        }
      })
    </script>
  </body>
</html>
